<template>
  <div class="dashboard">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" style="display: flex;justify-content: center;">
      <el-col :span="24" v-for="(item, index) in stats" :key="index">
        <el-card shadow="hover">
          <!-- 图标显示 -->
          <div class="stat-icon">
            <el-icon :color="item.color">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <!-- 统计数据和标签 -->
          <div class="stat-content">
            <h2>{{ item.value }}</h2>
            <p>{{ item.label }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <!-- 饼图组件 -->
          <pie-chart :data="pieData" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <!-- 柱状图组件 -->
          <bar-chart :data="barData" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import PieChart from './components/PieChart.vue';  // 引入饼图组件
import BarChart from './components/BarChart.vue';  // 引入柱状图组件
import { UserFilled } from '@element-plus/icons-vue';  // 引入Element Plus的图标
import { noticeList } from "@/api/modules/user";
import { useUserStore } from "@/stores/modules/user";

// 统计卡片数据
const stats = ref([
  { icon: UserFilled, value: 803, label: '客户总写', color: '#409EFF' },
  // { icon: UserFilled, value: 232, label: '累计点击', color: '#67C23A' },
  // { icon: UserFilled, value: 142, label: '新增问答', color: '#E6A23C' },
  // { icon: UserFilled, value: 657, label: '分享统计', color: '#F56C6C' },
  // { icon: UserFilled, value: 12, label: '新增互动', color: '#909399' },
  // { icon: UserFilled, value: 14, label: '新增页面', color: '#606266' },
]);

// 饼图数据
const pieData = ref([
  { value: 1048, name: 'A级' },
  { value: 735, name: 'B级' },
  { value: 580, name: 'C级' },
]);

// 柱状图数据
const barData = ref({
  days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  values: [10000, 32000, 22000, 15000, 25000, 5000, 3000],
});
const userStore = useUserStore();
onMounted(()=>{
  func();
})
const func = async()=>{
  const { data } = await noticeList();
  if(data.length==0){
    return;
  }
  userStore.setActiveList(data);
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

/* 统计卡片图标样式 */
.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

/* 统计内容样式 */
.stat-content {
  text-align: center;
}

.stat-content h2 {
  margin: 0;
  font-size: 24px;
}

.stat-content p {
  margin: 0;
  color: #606266;
}
</style>